<template>
  <div class="triple-bounce" :style="tripleStyle">
    <div class="bounce1" :style="bounceStyle"></div>
    <div class="bounce2" :style="[bounceStyle, bounceStyleMiddle]"></div>
    <div class="bounce3" :style="bounceStyle"></div>
  </div>
</template>

<script>
  export default {
    name: 'triple-bounce',
    props: {
      size: String,
      color: String,
      margin: String,
      left: String,
      top: String,
      justifyContent: String
    },
    computed: {
      spinnerSize () {
        return (this.size || 16) + 'px'
      },
      tripleStyle () {
        return {
          left: this.left || 0,
          top: this.top || '50px',
          justifyContent: this.justifyContent || 'center'
        }
      },
      bounceStyle () {
        return {
          width: this.spinnerSize,
          height: this.spinnerSize,
          backgroundColor: this.color
        }
      },
      bounceStyleMiddle () {
        return {
          marginLeft: this.margin,
          marginRight: this.margin
        }
      }
    }
  }
</script>

<style lang="less" scoped>
.triple-bounce {
    position: absolute;
    left: 0;
    top: 50px;
    width: 100%;
    background-color: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
   .bounce1, .bounce2, .bounce3 {
      border-radius: 100%;
      display: inline-block;
      animation: mint-spinner-triple-bounce 1.4s infinite ease-in-out both;
    }
    .bounce1 {
      animation-delay: -0.32s;
    }
    .bounce2 {
      animation-delay: -0.16s;

    }
}

@keyframes mint-spinner-triple-bounce {
  0%, 80%, 100% {
    transform: scale(0);
  } 40% {
    transform: scale(1.0);
  }
}
</style>
